
import React, { useState, useContext, forwardRef, useCallback, useRef, useEffect } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import { Row, Col, Radio, Button } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { postPaymentGlobalConfig } from '@sagas/payment'
import { MultiSelectStoreModal } from "@common/presentational/MultiSelectModal";
const ModifyModeContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { type: initType = 0 } = params
    const { stores: initStores = [] } = params
    const [ type, setType] = useState(initType)
    const [ store_ids, setStore] = useState(initStores)
    const { callback } = props
    const dispatch = useDispatch()
    const multiSelectModalRef = useRef();

    useEffect(()=>{
        if(store_ids.length){
            setStore(store_ids.map(o=>{
                return{
                    store_id: o.id,
                    store_name: o.name
                }
            }))
        }
    },[])
    const typeChange = useCallback(e => {
        setType(e.target.value)
    }, [])

    const submit = () => {
        dispatch(postPaymentGlobalConfig({
            config: type,
            store_ids:store_ids.map(o=>o.store_id)
        },()=>{
            callback && callback()
        }))
        hide()
    }

    const handleStoreChange = (storeIds, params) => {
        setStore(storeIds)
    }

    const showStoreModal = () => {
        multiSelectModalRef.current?.show()
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={24}>
                    <Radio.Group onChange={typeChange} value={type}>
                        <Radio value={0}>统一由品牌配置</Radio>
                        <Radio value={1}>入驻店铺自行配置</Radio>
                        <Radio value={2}>部分店铺可自行配置</Radio>
                    </Radio.Group>
                </Col>
            </Row>
            {type === 0 && <Row className="modal-line">
                <div className='ft-clr-l ft-14'>
                    注：品牌统一配置店铺的收款账号，店铺无配置权限；若场景订单已存在非品牌收款账号，此配置项将失效，需要重新配置后，方可正常收款。
                </div>
            </Row>}
            {type === 1 && <Row className="modal-line">
                <div className='ft-clr-l ft-14'>
                    注：入驻店铺独立配置本店铺订单的收款账号，品牌无配置权限；若此前已配置品牌收款账号，此配置项将失效，需重新配置后，方可正常收款。
                </div>
            </Row>}
            {type === 2 && <Row className="modal-line">
                <Button className="button-small"
                    type="primary"
                    ghost
                    onClick={showStoreModal}
                >＋选择店铺</Button>
                {store_ids.length ?<div className='mode-store-list'>
                    {store_ids.map(item=>{
                        return  <span className='mgr-8' key={item.store_id}>{item.store_name}</span>
                    })}
                </div> : null}
                <div className='ft-clr-l ft-14'>
                    注：已添加的店铺若此前已配置品牌收款账号将失效；未添加的店铺默认由品牌统一配置。
                </div>
            </Row>}
            <MultiSelectStoreModal
                ref={multiSelectModalRef}
                title="应用店铺"
                onChange={handleStoreChange}
            />
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal width={560} title="收款设置" ref={ref}>
        <ModifyModeContent {...props} />
    </CustomizeModal>
))